@charset "utf-8";
@import "app";

//按钮通用样式
@mixin btnCss($w,$h,$bjc,$fc){
  @include wh($w,$h);
  line-height: $h;
  margin: 0 auto;
  background: $bjc;
  color:$fc;
  border-radius: $h/2;
  display:block;
  text-align: center;
  overflow: hidden;
}
//按钮通用样式
@mixin btnNote($w,$h,$bjc,$fc,$fz){
  @include wh($w,$h);
  line-height: $h;
  margin: 0 auto;
  background: $bjc;
  color:$fc;
  border-radius: $h/2;
  display:inline-block;
  font-size: $fz;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-color: $bjc;
  overflow: hidden;
}
//按钮通用样式
@mixin btnScss($w, $h, $bjc, $fc, $fz, $br:4px, $bc: 0) {
  @if $bc == none {
    border: none;
  }@else {
    border-width: 1px;
    border-style: solid;
    border-color: $bjc;
  }
  @include wh($w, $h);
  @include display-flex();
  @include align-items(center);
  @include justify-content(center);
  background: $bjc;
  color: $fc;
  border-radius: $br;
  display: inline-block;
  font-size: $fz;
  overflow: hidden;
}
@mixin btn_B1($w, $h, $fc, $fz, $br:4px, $bc: 0) {
  @include wh($w, $h);
  @include display-flex();
  @include align-items(center);
  @include justify-content(center);
  color: $fc;
  border-radius: $br;
  display: inline-block;
  font-size: $fz;
  overflow: hidden;
}
@mixin btn_S0($w, $h, $fc, $fz, $br:4px, $bc: 0) {
  @include wh($w, $h);
  @include display-flex();
  @include align-items(center);
  @include justify-content(center);
  color: $fc;
  border-radius: $br;
  display: inline-block;
  font-size: $fz;
  overflow: hidden;
}
@mixin btn_green{
  font-size: 12px;
  background: #2DAFCD;
  color: #ffffff;
  &:hover{
    background: #39E9DB;
    box-shadow:0px 4px 12px 0px rgba(60,130,180,0.5);
    -webkit-box-shadow: 0px 4px 12px 0px rgba(60,130,180,0.5);
    -moz-box-shadow: 0px 4px 12px 0px rgba(60,130,180,0.5);
  }
  &:active{
    background: #39E9DB;
    box-shadow:0px 4px 12px 0px rgba(60,130,180,0.5);
    -webkit-box-shadow: 0px 4px 12px 0px rgba(60,130,180,0.5);
    -moz-box-shadow: 0px 4px 12px 0px rgba(60,130,180,0.5);
  }
  &.disabled{
  }
}
@mixin btn_component ($w, $h){
  width: $w;
  height: $h;
  @include display-flex();
  @include align-items(center);
  @include justify-content(center);
  border-radius: 4px;
  // display: inline-block;
  overflow: hidden;
  @include box-sizing();
}
.btn.btn-blue{
  @include btnNote(120, 44, #338FFB, #fff, 24);
}
.btn.btn-blue-main{
  @include btnNote(152, 50, #338FFB, #fff, 28);
}
.btn.btn-blue-big{
  @include btnNote(124, 40, #FF5F75, #fff, 28);
  font-weight: 600;
  border-width: 1;
  border-style: solid;
  border-color: #FF5F75;
}
.btn.btn-orange{
  @include btnNote(120, 44, #FFB623, #fff, 24);
}
.btn.btn-orange-main{
  @include btnNote(152, 50, #FFB623, #fff, 28);
  border-width: 1;
  border-style: solid;
  border-color: #FFB623;
}
.btn.btn-orange-big{
  @include btnNote(124, 40, #FFB623, #fff, 28);
  font-weight: 600;
  border-width: 1;
  border-style: solid;
  border-color: #FFB623;
}
.btn.btn-defalut{
  @include btnNote(120, 44, #fff, #B3B3B3, 24);
  border-width: 1;
  border-style: solid;
  border-color: #B3B3B3;
}
.btn.btn-defalut-big{
  @include btnNote(124, 40, #fff, #B3B3B3, 28);
  font-weight: 600;
  border-width: 1;
  border-style: solid;
  border-color: #B3B3B3;
}
.btn.btn-defalut-2{
  @include btnNote(160, 52, #fff, #999, 30);
  border-width: 1;
  border-style: solid;
  border-color: #999;
}
.btn.btn-confirm-2{
  @include btnNote(160, 52, #FF455F, #fff, 30);
  border-width: 1;
  border-style: solid;
  border-color: #FF455F;
}
.btn.btn-defalut-main{
  @include btnNote(152, 50, #fff, #B3B3B3, 28);
  border-width: 1;
  border-radius: 25px;
  border-style: solid;
  border-color: #B3B3B3;
}
.btn.btn-reset{
  @include btnNote(160, 52, #fff, #FF455F, 28);
  border-width: 1;
  border-style: solid;
  border-color: #FF455F;
}
.btn.btn-ok{
  @include btnNote(160, 52, #FF455F, #fff, 28);
  border-width: 1;
  border-style: solid;
  border-color: #FF455F;
}
.btn.btn-theme {
  @include btnScss(580, 90, #0087FF, #fff, 36);
}
.btn-add-item {
  @include btnScss(82, 48, #0087FF, #fff, 28);
}
.create-btn{
  @include btn_S0(98px, 32px, #fff, 12px, 4px);
}
.item-edit-btn{
  @include btn_component(276px, 32px);
}
.item-gray-btn{
  @include btn_component(132px, 32px);
  &.lg-btn{
    width: 212px;
  }
}
.item-blue-btn{
  @include btn_component(132px, 32px);
  &.lg-btn{
    width: 212px;
  }
  &.mid-btn{
    width: 102px;
  }
  &.m-btn{
    width: 90px;
  }
  &.max-btn{
    width: 100%;
  }
  &.mini-btn{
    width: 85px;
  }
  &.mini-64{
    width: 64px;
  }
}
.space-cancel-btn{
  @include btn_component(64px, 32px);
  color: #00B1D1;
  font-size: 14px;
  border: 1px solid #00B1D1;
  background: #ffffff;
}
.space-set-btn{
  @include btn_component(112px, 32px);
  color: #00B1D1;
  font-size: 14px;
  border: 1px solid #00B1D1;
  background: #ffffff;
}
.space-confirm-btn{
  @include btn_component(118px, 32px);
  color: #ffffff;
  font-size: 14px;
  border: 1px solid #00B1D1;
  background: #00B1D1;
}
.item-gray-boder-btn{
  @include btn_component(132px, 32px);
  &.lg-btn{
    width: 212px;
  }
  &.mid-btn{
    width: 102px;
  }
  &.w-btn{
    width: 100%;
  }
  &.m-btn{
    width: 90px;
  }
  &.mini-btn{
    width: 85px;
  }
  &.mini-height{
    height: 24px;
  }
  &.mini-form-btn{
    width: 60px;
    height: 24px;
  }
  &.mini-64{
    width: 64px;
    height: 32px;
  }
  &.m-form-btn{
    width: 88px;
    height: 24px;
  }
  &.m-table-btn{
    width: 80px;
    height: 12px;
  }
  &.m-filter-btn{
    width: 32px;
    height: 32px;
  }
}
.login-confirm-btn{
  @include btn_S0(300px, 44px, #fff, 14px, 5px);
  background: #2568B5;
}
.mechanism-register-btn{
  @include btn_S0(98px, 32px, #fff, 14px, 4px);
}
.btn-apply-default{
  @include btn_S0(72px, 32px, #fff, 12px, 4px);
}
.default-btn{
  @include btn_S0(88px, 24px, #fff, 12px, 4px);
}
.temp-create{
  @include btn_component(100px, 32px);
}

.btn-head-default{
  @include btn_B1(68px, 24px, #fff, 12px, 4px);
}
.btn-head-cancel{
  @include btn_B1(267px, 32px, #fff, 12px, 4px);
}
.space-create{
  @include btn_component(112px, 32px);
  background: #2DAFCD;
  color: #ffffff;
}
.impact-gray-btn{
  @include btn_component(88px, 32px);
  background: #fff;
  color: #50525B;
  border-radius:4px;
  border:1px solid rgba(210,215,220,1);
  font-size: 12px;
}
.impact-glay-btn{
  @include btn_component(128px, 32px);
  background: #D2D7DC;
  color: #787A83;
  border-radius:4px;
  font-size: 12px;
  border:1px solid rgba(210,215,220,1);
  &.mini{
    width: 104px;
  }
}
.impact-green-btn{
  @include btn_component(120px, 32px);
  background: #fff;
  color: #2DAFCD;
  border-radius:4px;
  font-size: 12px;
  border:1px solid #2DAFCD;
  &.mid{
    width: 100px;
  }
}
.impact-theme-btn{
  @include btn_component(120px, 32px);
  background: #2DAFCD;
  color: #fff;
  border-radius:4px;
  font-size: 12px;
  // border:1px solid #2DAFCD;
}
.clash-btn{
  @include btn_green();
}
.impact-view-btn{
  font-size: 12px;
  @include btn_component(110px, 32px);
  border:1px solid rgba(210,215,220,1);
  background: transparent;
  color: #C8CAD3;
  &.mini{
    width: 118px;
  }
}